<template>
	<view>
		<template>
			<view>
				<view class="uni-container">
					<view class="query">
						<view class="type">
							<text>消费类型查询：</text>
							<uni-easyinput trim="all" v-model="query.type" focus placeholder="请输入类型" ></uni-easyinput>
							<template>
							  <view>
							    <uni-data-select
							      v-model="query.type"
							      :localdata="range"
							      @change="change"
							    ></uni-data-select>
							  </view>
							</template>
						</view>
						<view class="de">
							<text>消费日期查询：</text>
							<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
							<uni-easyinput trim="all" v-model="query.statementDate" focus placeholder="请选择日期" ></uni-easyinput>
							<button type="primary" size="mini" @click="open">选择日期</button>
						</view>
						<view class="de">
							<text>金额区间查询：</text>
							<uni-easyinput trim="all" v-model="query.priceStart" focus placeholder="请输入开始金额" ></uni-easyinput>
							<uni-easyinput trim="all" v-model="query.priceEnd" focus placeholder="请输入结束金额" ></uni-easyinput>
						</view>
						<view class="buttons">
							<button type="primary" style="margin-right: 100rpx;margin-left: 100rpx; width: 200rpx;" size="default" @click="search()">查询</button>
							<button type="primary" size="default" @click="clear()">清空条件</button>
						</view>
					</view>
					<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据" >
						<uni-tr>
							<uni-th width="130rpx">类型</uni-th>
							<uni-th width="130rpx">金额</uni-th>
							<uni-th width="250rpx">消费日期</uni-th>
							<uni-th width="150rpx">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in list" :key="item.id">
							<uni-td width="130rpx">{{ item.type }}</uni-td>
							<uni-td width="130rpx">{{ item.money }}</uni-td>
							<uni-td width="250rpx">{{ item.statementDate }}</uni-td>
							<uni-td width="100rpx">
								<view class="uni-group">
									<button class="uni-button"  @tap="upOne(item)" size="mini" type="primary">修改</button>
									<button class="uni-button" @tap="delOne(item)" size="mini" type="warn">删除</button>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>
					<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total" @change="change" /></view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { onMounted } from 'vue';
import bill from '../../api/pay.js';
export default {
	data() {
		return {
			searchVal: '',
			list: null, //数据源
			pageSize: 6, // 每页数据量
			pageCurrent: 1, // 当前页
			total: 0, // 数据总量
			loading: false,
			query: {
				type: '',
				priceStart: '',
				priceEnd: '',
				statementDate: '',
				uid: ''
			},
			range: [
			  { value: "医疗", text: "医疗" },
								{ value: "美食", text: "美食" },
			  { value: "娱乐", text: "娱乐" },
								{ value: "出行", text: "出行" },
								{value:  "服装",  text: "服装"},
								{ value: "其他", text: "其他" },
			],
		};
	},
	onLoad() {
		
		this.search();
	},
	methods: {
		getByUid(page=1){
			this.pageCurrent = page;
			bill.ByUid(this.pageCurrent, this.pageSize).then(res => {
				this.list = res.data.data.billData.rows;
				this.total = res.data.data.billData.total;
			});
		},
		
		userid() {
			bill.getUserInfoByToken().then(res => {
				this.query.uid = res.data.data.userInfo.id;
				console.log(this.query.uid)
			});
		},
		// 删除某项
		delOne(item) {
			console.log(item.id);
			// 删除单项
			bill.delBill(item.id).then(res => {
				console.log(res.data.message);
				this.search();
			});
		},
		// 修改某项
		upOne(item) {
			console.log(item.id);
			uni.reLaunch({
			url: '/pages/add/add?id='+item.id
			});
		},
		clear() {
			var id = '';
			bill.getUserInfoByToken().then(res => {
				id = res.data.data.userInfo.id;
				(this.query.type = ''), (this.query.priceStart = '');
				this.query.priceEnd = '';
				this.query.statementDate = '';
				this.query.uid = id;
				this.search();

				console.log(this.query);
			});
		},

		// 打开日历
		open() {
			this.$refs.calendar.open();
		},
		// 日历的改变
		confirm(e) {
			this.query.statementDate = e.fulldate;
		},

		// 条件分页
		search(page = 1) {
			this.pageCurrent = page;
			this.userid();
			bill.getBillByUid(this.pageCurrent, this.pageSize, this.query).then(res => {
				this.list = res.data.data.billData.rows;
				this.total = res.data.data.billData.total;
			});
		},
	
		// 分页触发
		change(e) {
			this.search(e.current);
		}
	}
};
</script>

<style scoped lang="less">
.query {
	display: flex;
	align-items: baseline;
	flex-direction: column;
	.type,
	.de,
	.buttons,
	.money {
		margin-top: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: baseline;
		flex-wrap: nowrap;
	}
}
</style>
